// 物品页弹框
import { Form, FormInstance, Input, Select, Tag } from 'antd'
import React from 'react'
import { IGoodsProps } from './Goods'

/** GoodsModal 类下的 state 类型 */
interface goodsModalState {
    children: string[]
}

interface IGoodsModalProps {
    showList: IGoodsProps
    choice: string
}

export class GoodsModal extends React.Component<IGoodsModalProps> {
    public state: goodsModalState = {
        children: []
    }
    /** 表达数据实例，相当于 this.props.forms */
    public formRef = React.createRef<FormInstance>()

    public componentDidMount() {}

    public getAllFormData() {
        return {
            name: this.getGoodsDataByKey('name'),
            num: this.getGoodsDataByKey('num'),
            description: this.getGoodsDataByKey('description'),
            tags: this.getGoodsDataByKey('tags')
        }
    }

    public getGoodsDataByKey(key: string) {
        return this.formRef.current!.getFieldValue(key)
    }

    public reset() {
        this.formRef.current!.resetFields()
    }

    public handleChange = (value: string[]) => {}

    public render() {
        let { children } = this.state
        let { showList, choice } = this.props
        console.log(`showList, choice`, showList, choice)
        return (
            <div>
                <Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} ref={this.formRef}>
                    <Form.Item name="name" label="物品名称" rules={[{ required: true }]}>
                        {choice === 'show' ? (
                            <span>{showList.name}</span>
                        ) : choice === 'edit' ? (
                            <Input defaultValue={showList.name} />
                        ) : (
                            <Input />
                        )}
                    </Form.Item>
                    <Form.Item name="num" label="数量" rules={[{ required: true }]}>
                        {choice === 'show' ? (
                            <span>{showList.num}</span>
                        ) : choice === 'edit' ? (
                            <Input defaultValue={String(showList.num)} />
                        ) : (
                            <Input />
                        )}
                    </Form.Item>
                    <Form.Item name="description" label="描述" rules={[{ required: true }]}>
                        {choice === 'show' ? (
                            <span>{showList.description}</span>
                        ) : choice === 'edit' ? (
                            <Input defaultValue={showList.description} />
                        ) : (
                            <Input />
                        )}
                    </Form.Item>
                    <Form.Item name="tags" label="标签" rules={[{ required: true }]}>
                        {choice === 'show' ? (
                            showList.tags.map(item => <Tag key={item}>{item}</Tag>)
                        ) : (
                            <Select
                                mode="tags"
                                style={{ width: '100%' }}
                                defaultValue={choice === 'edit' ? ['hh'] : []}
                                onChange={this.handleChange}
                                tokenSeparators={[',']}
                                allowClear={true}
                            >
                                {children}
                            </Select>
                        )}
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
